﻿<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title:{
			text: "Candle Stick chart using risingColor property"
		},
		zoomEnabled: true,
		axisY: {
			includeZero:false,
			title: "Prices",
			prefix: "$ "
		},
		axisX: {
			interval:2,
			intervalType: "month",
			valueFormatString: "MMM-YY",
			labelAngle: -45
		},
		data: [
		{
			type: "candlestick",
			risingColor: "#F79B8E",
			dataPoints: [
				{x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
				{x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
				{x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
				{x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},
				{x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},
				{x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},
				{x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},
				{x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},
				{x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},
				{x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},
				{x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]}
			]
		}
		]
	});
	chart.render();
}
</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;">
</div>
</body>
</html>